<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/css/background.css">
    <link rel="stylesheet" href="../static/images/bodybg.jpg" th:href="@{images/bodybg.jpg}">
</head>

<style th:inline="css">
    body {
        background-image: url('http://p5.qhimg.com/bdr/__85/t018fee1916a0f0377a.jpg') !important;
        /*background-image: url('http://p5.qhimg.com/bdr/__85/t018fee1916a0f0377a.jpg') !important;*/
        background-size: 100% 800px !important;
        background-attachment: fixed !important;
        background-repeat: no-repeat !important;
    }
</style>

<body>
<!--导航-->
<nav th:replace="_fragments :: menu(1)" class="ui top fixed menu animate__animated animate__backInLeft">
    <!--流动导航组件-->
    <div class="m-container">
        <div class="ui secondary stackable menu">
            <div class="item">
                <h2 class="ui header">Ended</h2>
            </div>&nbsp;
            <a href="#" th:href="@{/}" class="m-item item m-mobile-hide">
                <i class="home icon"></i>首页</a>
            <a href="#" th:href="@{/home}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'">
                <i class="anchor icon"></i>博客</a>
            <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'">
                <i class="idea icon"></i>分类</a>
            <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'">
                <i class="tags icon"></i>标签</a>
            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'">
                <i class="folder open icon"></i>归档</a>
            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'">
                <i class="info icon"></i>关于</a>
            <div class="m-item item m-mobile-hide">
                <form name="search" action="#" th:action="@{/search}" method="post">
                    <div class="ui right aligned inverted category search">
                        <div class="ui icon input">
                            <input class="prompt" name="query" type="text" th:value="${query}" style="color: #6495ed"
                                   placeholder="搜索">
                            <i onclick="document.forms['search'].submit()" class="search icon"></i>
                        </div>
                        <div class="results"></div>
                    </div>
                </form>
            </div>
            <div class="m-item item m-mobile-hide">
                <a class="ui basic vertical animated circular button" href="#" target="_blank" th:href="@{/admin/}"
                   tabindex="0">
                    <div class="hidden content">登录</div>
                    <div class="visible content">
                        <i class="ceter user outline icon"></i>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle basic icon button m-top-right m-mobile-show m-bg">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间内容-->
<div class="m-padded-tb-max m-container-large m-opacity-small">
    <!--container容器，自动匹配合适的大小效果-->
    <div class="ui container">
        <!--16份制的布局-->
        <div class="ui stackable grid">
            <!--center blog content 11份-->
            <div class="eleven wide column">
                <div class="ui segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <i class="leaf icon m-text-w">&nbsp;Discovery</i>
                        </div>
                        <div class="right aligned column">
                            共 <h2 class="ui orange header m-inline-block" th:text="${page.totalElements}"> 14 </h2> 篇
                        </div>
                    </div>
                </div>
                <div class="ui segment m-shadow-small" th:each="blog : ${page.content}">
                    <div class="ui padded vertical segment m-padded-tb-medium">
                        <div class="ui middle aligned mobile reversed stackable grid">
                            <div class="ten wide column">
                                <h3 class="ui header">
                                    <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" class="m-black"
                                       target="_blank" th:text="${blog.title}"><i class="paperclip icon"></i>和我一起去旅游怎么样？
                                    </a>
                                </h3>
                                <p class="m-text" th:text="|${blog.description}......|">
                                    如果问世间上还有真正的“香格里拉”吗？那么这个地方一定是不丹王国！这是一块心灵的福地，是崇尚高雅与纯洁的精神乐园</p>
                                <div class="ui middle aligned grid">
                                    <div class="twelve wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <span><i class="user circle outline icon"></i></span>
                                                <span class="m-text-t1" th:text="${blog.user.nickname}">颜云华</span>
                                            </div>
                                            <div class="item">
                                                <span><i class="clock outline icon"></i></span>
                                                <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-02-01</span>
                                            </div>
                                            <div class="item">
                                                <span><i class="comment alternate outline icon"></i></span>
                                                <span th:text="${blog.commentCount}">12</span>
                                            </div>
                                            <div class="item">
                                                <span><i class="eye icon"></i></span>
                                                <span th:text="${blog.views}">222</span>
                                            </div>
<!--                                            <div class="item">-->
<!--                                                <span><i class="thumbs up outline icon"></i></span>-->
<!--                                                    <span th:text="${blog.praise}">11</span>-->
<!--                                            </div>-->
                                        </div>
                                    </div>
                                    <div class="right aligned four wide column">
                                        <a href="#" target="_blank" th:href="@{/types/{id}(id=${blog.type.id})}" class="ui grey basic label m-padded-tiny">
                                            <i class="folder outline icon"></i>
                                            <span th:text="${blog.type.name}">旅行日记</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="middle aligned six wide column">
                                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                                    <img src="https://picsum.photos/id/1015/700/450" th:src="@{${blog.firstPicture}}"
                                         style="width:250px ; height:150px !important;" alt="" class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--footer-->
                <br>
                <div style="text-align: center" th:if="${page.totalPages}>1">
                    <a href="#" th:href="@{/home/(page=${page.number}-1)}"
                       class="ui inverted circular large icon button" th:unless="${page.first}">
                        <i class="left orange chevron icon"></i></a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="#" th:href="@{/home/(page=${page.number}+1)}"
                       class="ui inverted circular large icon button" th:unless="${page.last}">
                        <i class="right orange chevron icon"></i></a>
                </div>
            </div>

            <!--right blog content 5份-->
            <div class="five wide column">
                <!--分类-->
                <div class="ui segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <i class="lightbulb icon m-text-w">&nbsp;Classify</i>
                        </div>
                        <div class="right aligned column">
                            <div class="right aligned column">
                                <a href="#" th:href="@{/types/-1}" class="m-black" target="_blank">more <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui divider"></div>
                    <div class="ui fluid vertical menu">
                        <a href="#" th:href="@{/types/{id}(id=${type.id})}" th:each="type : ${types}" target="_blank" class="item">
                            <span th:text="${type.name}">旅行日记</span>
                            <div class="ui circular label m-bottom-l1" th:text="${#arrays.length(type.blogs)}">11</div>
                        </a>
                    </div>
                </div>

                <!---标签-->
                <div class="ui segment  m-margin-tb-large">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <i class="tags icon m-text-w">&nbsp;Tags</i>
                        </div>
                        <div class="right aligned column">
                            <div class="right aligned column">
                                <a href="#" th:href="@{/tags/-1}" class="m-black" target="_blank">more <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui divider"></div>
                    <div class="ui center aligned segment m-bg">
                        <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" target="_blank"
                           th:each="tag : ${tags}" class="ui grey basic label m-margin-tb-tiny ">
                            <span th:text="${tag.name}">学习方法</span>
                        </a>
                    </div>

                </div>

                <!--每日推荐-->
                <div class="ui segment m-margin-tb-large">
                    <i class="hand point right icon m-text-w">&nbsp;Recommend</i>
                    <div class="ui divider"></div>
                    <div class="ui fluid vertical menu" >
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" th:each="blog : ${recommendBlogs}"
                           class="m-black m-text-thin item" th:text="${blog.title}">旅行日志(Travel Diary)</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="m-padded-w1 m-fixed m-right-bottom">
    <!--一键回到顶部-->
    <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
    <!--一键回到底部-->
    <div id="toBottom-button" class="ui icon button"><i class="chevron down icon"></i></div>
</div>

<!--底部footer-->
<footer th:replace="_fragments :: footer"></footer>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Fog-Forest/live2d@1.0.2/live2d_load/autoload.js"></script>
<!--/*/</th:block>/*/-->

<!--导航的手机端按钮的响应页面-->
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    });
    $('#linkButton').popup({
        popup: $('.linkQR.popup'),
        on: 'click',
        position: 'bottom center'
    });
    //直达top方法
    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 500);
    });
    //直达bottom方法
    $('#toBottom-button').click(function () {
        $(window).scrollTo("100%", 500);
    });


</script>

</body>
</html>